<script setup lang='ts' name="policy-message">
import { delPolicyList, getPolicyArea, getPolicyList, getVideoType, videoSort } from '@fl/api/fangjiaohui'
import ButtonItem from '@fl/components/button-item.vue'
import { ElButton, ElCard, ElCol, ElDatePicker, ElForm, ElFormItem, ElMessage, ElRow } from 'element-plus'
import { cloneDeep } from 'lodash-es'
import { ref } from 'vue'

import AddItem from './component/add.vue'
import DetailItem from './component/detail.vue'
import VideoList from './component/video-list.vue'

const per: any = [
    {
        label: '详情',
        text: true,
        value: 'info',
    },
    {
        label: '编辑',
        text: true,
        value: 'edit',
    },
    {
        label: '删除',
        text: true,
        value: 'delete',
    },
]
// const sortBtn: any = [
//     {
//         label: '向上',
//         text: true,
//         value: 2,
//     },
//     {
//         label: '向下',
//         text: true,
//         value: 3,
//     },
// ]
// const noTop: any = {
//     label: '取消置顶',
//     text: true,
//     value: 0,
// }
// const top: any = {
//     label: '置顶',
//     text: true,
//     value: 1,
// }

const state = {
    catId: '',
    info: '', // 视频类型序号
}
const pageInfo = ref<any>({
    page: 1,
    size: 10,
    total: 0,
})

const loading = ref(false)
const addDialog = ref(false)
const show = ref(false)
const detail = ref<any>({})
const addItemRef = ref()
const videoRef = ref()
const detailItemRef = ref()
const form = ref({ ...state })
const list = ref<any>([])
const videoType = ref<any>([])
const areaMap = ref<any>([])

function reset() {
    form.value = { ...state }
    videoRef.value.init()
    getData()
}

async function getData(pages?: any) {
    loading.value = true
    getPolicyList({
        ...form.value,
        page: pages?.page || pageInfo.value.page,
        size: pages?.size || pageInfo.value.size,
    }).then((res: any) => {
        if (res.code === 200) {
            const data = res?.data ?? []
            list.value = data?.records ?? []

            pageInfo.value.total = data.total
        }
        else {
            ElMessage.error(res.msg)
        }
    }).catch((err: any) => {
        ElMessage.error(err)
    }).finally(() => {
        loading.value = false
    })
}

async function doAction(item: any, row: any) {
    switch (item.value) {
        case 'info':
            detail.value = cloneDeep(row)
            show.value = true
            break
        case 'edit':
            detail.value = cloneDeep(row)
            addDialog.value = true
            break
        case 'delete':
            doDel(row.id)
            break
        case 1:
        case 2:
        case 3:
            doSort({
                id: row.id,
                status: item.value,
            })
            break
        default:
            break
    }
}

function doDel(id: any) {
    delPolicyList(id).then((res: any) => {
        if (res.code === 200)
            getData()
        else
            ElMessage.error(res.msg)
    }).catch((err: any) => {
        ElMessage.error(err)
    })
}

function doAdd() {
    addDialog.value = true
    detail.value = {}
}

async function doSort(data: any) {
    await videoSort(data)
    getData()
}

function getAreaMap() {
    getPolicyArea({ page: 1, size: 999 }).then((res: any) => {
        areaMap.value = res ?? []
    })
}

async function init() {
    getData()
    videoType.value = await getVideoType({ type: 2 }) // 1 视频管理  2 资讯
    getAreaMap()
}
init()
</script>

<template>
    <ElCard v-loading.fullscreen.lock="loading"
            mb-20
    >
        <ElForm :inline="true"
                :model="form"
                label-width="100"
                class="query_form"
        >
            <ElRow>
                <ElCol :span="6">
                    <ElFormItem label="标题内容">
                        <ElInput v-model="form.info" />
                    </ElFormItem>
                </ElCol>

                <ElCol :span="6">
                    <ElFormItem label="专题分类">
                        <ElSelect v-model="form.catId">
                            <ElOption v-for="item in videoType"
                                      :key="item.id"
                                      :value="item.id"
                                      :label="item.name"
                            />
                        </ElSelect>
                    </ElFormItem>
                </ElCol>

                <ElCol :span="4"
                       :offset="8"
                       style="text-align: right;"
                >
                    <ElButton type="primary"
                              @click="getData"
                    >
                        搜索
                    </ElButton>

                    <ElButton @click="reset">
                        重置
                    </ElButton>
                </ElCol>
            </ElRow>
        </ElForm>
    </ElCard>

    <ElCard class="mb-20">
        <ElButton type="primary"
                  class="mb-20"
                  @click="doAdd"
        >
            + 添加
        </ElButton>

        <VideoList ref="videoRef"
                   :data="list"
                   :total="pageInfo.total"
                   @do-sort="doSort"
                   @page-change="getData"
        >
            <template #action="{ row }">
                <ButtonItem :btns="per"
                            @btn-click="doAction($event, row)"
                />
            </template>
        </VideoList>
    </ElCard>

    <AddItem v-if="addDialog"
             ref="addItemRef"
             key="AddItem"
             v-model="addDialog"
             :video-type="videoType"
             :area="areaMap"
             :data="detail"
             @confirm="getData"
    />

    <DetailItem v-if="show"
                ref="detailItemRef"
                v-model="show"
                :video-type="videoType"
                :data="detail"
                @confirm="getData"
    />
</template>

<style lang="less" scoped>
.query_form {
    :deep(.el-form-item__content) {
        width: 250px;
    }
}
</style>
